<template>
    <div class="box">
        <div class="header_title">
            <van-icon name="arrow-left" />
            <div class="title">
                回复评价
            </div>
        </div>

        <div class="main">
            <div class="main_head">
                <div>
                    <span class="sp1">默认回复</span>
                    <span class="sp2">(点击文本使用)</span>
                </div>
                <div @click="toEditResponse">
                    <span class="sp3">编辑</span>
                </div>
            </div>

            <!-- 编辑框 -->
            <div class="beforeText" @click="useDefaultResponse">
                <div v-if="editedResp==null">
                    {{defaultResponse}}
                </div>
                <div v-else>
                    {{editedResp}}
                </div>
            </div>
            <!-- 文字区域 -->
            <div class="textArea" @click="isClickInput=true">
                
                <div class="inputResp">
                    <van-field
                    v-model="myResponse"
                    rows="5"
                    autosize
                    type="textarea" 
                    maxlength="200"
                    placeholder="有什么想对顾客说的"
                    show-word-limit
                    />
                </div>
            </div>


        </div>

        <div class="btndiv">
            <van-button round type="info" class="submitBtn" @click="submitReply">提交</van-button>
        </div>
    </div>
</template>
<script>
export default{
    data(){
        return{
            defaultResponse:'亲爱的顾客，感谢您认可我们的口味和服务，我们会努力做得更好，祝您生活愉快！',   //1,默认回复
            myResponse:'',     //3,商家实际回复
            editedResp:'',  //2,修改后的回复
            isClickInput:false,
            ifEdit:false   
        }
    },
    methods:{
        toEditResponse(){
            this.ifEdit=true
            this.$router.push({
                path:'./EditResponse',
                query:{
                    defaultResponse:this.defaultResponse
                }
            })
            console.log(1243)
        },
        submitReply(){
            this.$router.push('./CustomerReply')
        },
        useDefaultResponse(){
            if(this.editedResp==null){
                this.myResponse=this.defaultResponse
            }else{
                this.myResponse=this.editedResp
            }
            
        }
    },
    created(){
        this.editedResp=this.$route.query.resp

    }
}
</script>
<style scoped>
    /* *{
        border: 1px solid red;
    } */
    .box{
        width: 100%;
        background: #f7f7f7;
    }
    .header_title{
        background-color: rgba(255, 110, 83, 1);
        display: flex;
        align-items: center;
        height: 50px;
        font-size: 16px;
        color: aliceblue;
    }
    .title{
        text-align: center;
        width: 90%;
        font-size: 20px;
    }
    .main{
        width:100%;
        height: 500px;
        background: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .main_head{
        width:90%;
        height: 50px;
        background: white;
        display: flex;
        justify-content: space-between;
       
    }
    .sp1{
       font-size: 16px;
    }
    .sp2{
       font-size: 14px;
    }
    .sp3{
       font-size: 14px;
       color: blue;
    }
    .beforeText{
        width: 90%;
        height: 100px;
        background: #f7f7f7;
        margin-top:20px;
        font-size: 16px;
    }
    .textArea{
        width: 90%;
        height:auto;
        background: #f7f7f7;
        margin-top:20px;
    }
    .btndiv{
        width: 100%;
        text-align: center;
        background: white;
    }
    .submitBtn{
        width: 90%;
        height: 50px;
        background: #ff6e53;
        border: 1px solid #ff6e53;
        margin: 10px auto;
    }
    .inputResp{
        display: block;
        background: #f7f7f7;
        border: 1px solid grey;
    }
   

</style>
